<script setup lang="ts">
import { ref, computed } from "vue";
import { useDark, useECharts } from "@pureadmin/utils";

// 兼容dark主题
const { isDark } = useDark();
let theme = computed(() => {
  return isDark.value ? "dark" : "default";
});
const props = defineProps({
  dataArr: {
    type: Array,
    default: () => []
  }
});

// 初始化ECharts
const chartRef = ref();
const { setOptions } = useECharts(chartRef, { theme });

// 根据配置项渲染ECharts
setOptions({
  tooltip: {
    trigger: "item"
  },
  legend: {
    top: "5%",
    left: "center",
    show: false
  },
  series: [
    {
      name: "",
      type: "pie",
      radius: ["40%", "70%"],

      label: {
        show: false,
        position: "center"
      },
      emphasis: {
        label: {
          show: false,
          fontSize: 40,
          fontWeight: "bold"
        }
      },
      labelLine: {
        show: false
      },
      data: props.dataArr
    }
  ]
});
</script>

<template>
  <div ref="chartRef" style="width: 100px; height: 100px" />
</template>
